// import React, { Component } from 'react'
// import { Icon } from 'react-vant';
// import { Checkbox } from 'react-vant';
// import axios from '../utils/request'

// export default class ShopCar extends Component {

//     state = {
//         list: [],
//     }

//     go() {
//         this.props.history.go(-1)
//     }

//     componentDidMount() {
//         this.getlist();
//     }

//     getlist() {
//         axios.post('/api/shopcar').then(res => {
//             // console.log(res);
//             this.setState({
//                 list: res.data.data
//             })
//         })
//     }



//     Del(id) {
//         axios({
//             url: '/api/shopcardel',
//             method: 'post',
//             data: { id: id }
//         }).then(res => {
//             // console.log(res);
//             this.setState({
//                 list: res.data.data
//             })
//         })
//         this.getlist();
//     }

//     render() {
//         let { list } = this.state
//         return (
//             <div className='wrap'>
//                 <header>
//                     <div className="detail">
//                         <Icon name="arrow-left" className='icons' onClick={() => { this.go() }} />
//                         <span>购物车</span>
//                     </div>
//                 </header>
//                 <main>
//                     <div className="main">
//                         {
//                             list.length && list.map((item, index) => {
//                                 return <div className='shopcar' key={item.id}>
//                                     <Checkbox defaultChecked defaultChecked={false} className='check'> </Checkbox>
//                                     <img src={item.img} alt="" />
//                                     <div className="carfont">
//                                         <p>{item.name}</p>
//                                         <div className="fonts">
//                                             <span>￥{item.price}</span>
//                                             <div className="fon">
//                                                 <button>-</button>
//                                                 <span>1</span>
//                                                 <button>+</button>
//                                                 <Icon name="delete-o" className='del' onClick={() => { this.Del(item.id) }} />
//                                             </div>
//                                         </div>
//                                     </div>
//                                 </div>
//                             })
//                         }
//                     </div>
//                 </main>
//                 <footer>
//                     <div className="foot">
//                         <Checkbox defaultChecked defaultChecked={false} className='check' >全选</Checkbox>
//                         <div className="fot">
//                             <p>
//                                 <span>合计:</span>
//                                 <span>￥</span>
//                             </p>
//                             <button>提交订单</button>
//                         </div>
//                     </div>
//                 </footer>
//             </div>
//         )
//     }
// }


import React, { useEffect, useState } from 'react'
import { Icon } from 'react-vant';
import axios from '../utils/request'

export default function ShopCar(props) {

    //总数据
    const [list, setlist] = useState([])

    //全选
    const [ifshow, setshow] = useState(false);

    //总价
    const [allprice, setallprice] = useState(0)

    const go = () => {
        props.history.goBack(-1)
    }


    useEffect(() => {
        getlist()
    }, [])

    const getlist = () => {
        axios.post('/api/shopcar').then(res => {
            setlist([...res.data.data])
        })
    }

    const Del = (id) => {
        axios.post('/api/shopcardel', { id }).then(res => {
            // console.log(res);
            getlist()
        })
    }



    //减减
    const jian = (item, index) => {
        if (item.num > 1) {
            list[index].num = list[index].num - 1
        } else {
            return
        }
        setlist([...list]);
        allprices()
    }

    const jie = (item, index) => {
        if (item.num) {
            list[index].num = list[index].num + 1;
        }
        setlist([...list]);
        setallprice();
        allprices();
    }

    //单选
    const handleflag = (item, index) => {

        if (item.show) {
            list[index].show = 0
        } else {
            list[index].show = 1
        }
        setlist([...list]);
        allprices();
        ifall();

    }



    //全选
    const all = () => {
        if (!ifshow) {
            list.forEach((item, index) => {
                item.show = 1
            })
            setshow(true)
        } else {
            list.forEach((item, index) => {
                item.show = 0
            })
            setshow(false)
        }
        setlist([...list])
        allprices();

    }

    //判断全选
    const ifall = () => {
        const num = list.filter(item => item.show === 1)
        if (list.length !== 0 && list.length === num.length) {
            setshow(true)
        } else if (list.length !== num.length) {
            setshow(false)
        }
    }

    //总价
    const allprices = () => {
        const datature = list.filter(item => item.show === 1)
        const alls = datature.reduce((a, b) => {
            return a += b.num * b.price
        }, 0)
        setallprice(alls)
    }

    //支付
    const toShoplist = () => {
        // window.open('https://openapi.alipaydev.com/gateway.do?method=alipay.trade.page.pay&app_id=2021000118645842&charset=utf-8&version=1.0&sign_type=RSA2&timestamp=2021-11-03%2020%3A54%3A18&sign=M0v5DBJOjwOGepmy5KHKsHz1g88Lcxh7wP5xd3xVkd1ukC7imDf2hxvFCnie6eQ3iUVvMDiGlqQY74WFzhC5kCfnrGCjoZb7s0Gu0vjRNuEXTc79kzSHSSTvlLUhPMinJHgkpkLLMDO6cNjBOsTEMTZqKVBPmVHHekcS%2F28Sl7x0TxTSlSSU9SyKFl9rKwuDINW4XElzj291AmVX54aOddDEUqyUqJebbzwMeH7vpljmnjWSRHV9tCFLc31Nmc7Y%2FQZawrvAci1p1Tqx19eU7qxJ%2BRdUbiio8%2BHFn70DQSkyi6LSUg7vYnatvqMdIu038PWnnEZMnIfa7LkLw1wCTA%3D%3D&alipay_sdk=alipay-sdk-nodejs-3.1.7&biz_content=%7B%22out_trade_no%22%3A%221635944058112%22%2C%22product_code%22%3A%22FAST_INSTANT_TRADE_PAY%22%2C%22total_amount%22%3A%22125.95%22%2C%22subject%22%3A%22xxxxxxxxxxxxxx%22%2C%22body%22%3A%22jjjjjjjjjjjjjjj%22%7D')
        axios.get('/api/zhifu', { params: { allprice } }).then(res => {
            // console.log(res);
            window.open(res.data)
        })
    }



    return (
        <div className='wrap'>
            <header>
                <div className="detail">
                    <Icon name="arrow-left" className='icons' onClick={() => { go() }} />
                    <span>购物车</span>
                </div>
            </header>
            <main>
                <div className="main">
                    {
                        list.length && list.map((item, index) => {
                            return <div className='shopcar' key={item.id}>

                                <input className="dan" type="checkbox" checked={item.show ? true : false} onChange={() => { handleflag(item, index) }} />

                                <img src={item.img} alt="" />
                                <div className="carfont">
                                    <p>{item.name}</p>
                                    <div className="fonts">
                                        <span>￥{item.price}</span>
                                        <div className="fon">
                                            <button onClick={() => { jian(item, index) }}>-</button>
                                            <span>{item.num}</span>
                                            <button onClick={() => { jie(item, index) }}>+</button>
                                            <Icon name="delete-o" className='del' onClick={() => { Del(item.id) }} />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        })
                    }
                </div>
            </main>
            <footer>
                <div className="foot">
                    <input type="checkbox" checked={ifshow} onChange={() => { all() }} />
                    <div className="fot">
                        <p>总价：￥{allprice}</p>
                        <button onClick={() => toShoplist()}>提交订单</button>
                    </div>
                </div>
            </footer>
        </div>
    )
}
